<template>
	<!-- 签订合同 -->
	<view class="main-all">
		<view class="main-head">
			<view class="card card--full">
			    <view class="card__head">
			        <view class="card__title">
			            合同文件
			        </view>
			    </view>
			    <view class="card__content idcard" >
			    <view v-for="(item,index) of idcard_img" class="permutation">
			        <view class="idcard__cell">
			            <view class="idcard__img">
			                <image class="idcard__picture" @tap="_chooseImage(index)" :class="{'idcard__picture--left': idcard_img[index].orientation != 'up'}" :src="idcard_img[index].path ? idcard_img[index].path :  '/static/img/avatar.png'" mode="aspectFill"></image>
			            </view>
			            <view class="idcard__txt">合同文件{{index+1}}</view>
			        </view>
			    </view>
				<view v-if="idcard_img.length == 0">暂无合同文件</view>
			</view>
			</view>
			 <cpimg ref="cpimg" @result="cpimgOk" @err="cpimgErr"/>
		</view>
	</view>
</template>
<script>
	import cpimg from "@/components/cpimg/cpimg.vue";
	import { router, toast, check, localStorage } from '@/common/util.js';
	import { mapState, mapActions, mapMutations } from 'vuex';
	export default{

		computed: mapState(['userInfo', 'hasLogin']),
		data() {
			return {
				adPicture:true,
				dePicture:false,
				indexb:1,//统计idcard_img元素个数
				idcard_img: [{
					path: '',
					orientation:'up'
				}
				],
				picturea:['','','','',''],
			}
		},
		onLoad(options){
			var type = options.type;
			var arry = [];
			var that = this;
			uni.getStorage({
				 key: 'htfiles',
				 complete: function (res) {
					 console.log(res.data)
					 var tem = res.data;
					 for(var i=0; i<tem.length; i++){
						 if(type == 'jfht'){
							 arry.push({path:tem[i].jfhtpic,orientation:'up'});
						 }else{
							 arry.push({path:tem[i].yfhtpic,orientation:'up'});
						 }
					 }
					 that.idcard_img = arry;
				 }
			});
		},
		methods:{
			_chooseImage(index) {
			    let that = this;
			    if(this.idcard_img[index].path == ''){
			        this.$refs.cpimg._changImg(index);
			    }else{
			        // 查看图片
			        uni.previewImage({
			            current: 0,
			            urls: [this.idcard_img[index].path]
			        });
			    }
			},
			cpimgOk(file) {
							   console.log('fdsafuhagikvo');
			    this.idcard_img[file.urlType].path = file.data[0];
			    this.getImageInfo(file.urlType);	
							   toast.loading('图片上传中，请稍后...');
							   seconduploadPic(this.idcard_img[file.urlType].path,{"filetype":"gsfj"}).then(res =>{	
									toast.hideLoading();		
									let pic = eval('('+res.data+')');
									let picture = JSON.parse(pic);
									this.picturea[file.urlType]=picture[0].meslist[0].url;
									this.$emit('picpost',this.picturea);
									console.log(this.picturea);
								});
			},
			cpimgErr(e) {
			    toast.show(e);
			},
			getImageInfo(index) {
			    let that = this;
			    uni.getImageInfo({
			        src: that.idcard_img[index].path,
			        success: function(info) {
			            if(info.width < info.height){
			                that.idcard_img[index].orientation = 'left';
			            }
			        }
			    })
			},
		}
	}
</script>

<style lang="scss">
	 @import '@/style/mixin/flex.scss';
	 @import '@/style/page/form.scss';
	 @import '@/style/page/card.scss';
	 @import '@/style/page/empty.scss';
	 @import '@/style/page/drawer.scss';
	 @import '@/style/mixin/hr.scss';
	 
	 .page{
	     padding: 0 0 44px;
	 }   
	 .permutation{
	 	display: flex;
	 	flex-direction: row;
	 }
	 .form__interval{
	     @include flex(null, center);
	     @include flex-self(keep);
	     padding-right: $uni-spacing-row-base;
	 }  
	 .formInput__field--interval{
	     width: 3em;
	     text-align: center;
	     font-size:14px;
	     padding: 0 $uni-spacing-row-sm;
	     color: $uni-text-color-grey;
	 }
	 .formInput__field + picker.form__icon{
	     @include flex-self(keep);
	 }   
	 .formInput__field + picker.form__icon uni-icons{
	     border-left: 1px solid $uni-border-color;
	     padding: 0 $uni-spacing-row-base 0 $uni-spacing-row-sm;
	 }
	 .idcard{
	     flex-wrap: wrap;
	     &__cell{
	         width: 320upx;
	     }
	     &__picture{
	         position: absolute;
	         top: 0;
	         left: 0;
	         display: block;
	         width: 308upx;
	         height: 228upx;
	         &--left{
	             width: 228upx;
	             height: 308upx;
	             transform-origin: top left;
	             transform: rotate(90deg) translateY(-308upx);
	         }
	     }	        
	 }	
	 .idcard{
	     @include flex(between);
	     &__img{
	         position: relative;
	         width: 308upx;
	         height: 228upx;
	         border-radius: $uni-border-radius-sm;
	         margin-bottom: $uni-spacing-col-sm;
	         border: 1px dashed $uni-border-color;
	     }
	     &__close{
	         position: absolute;
	         top: $uni-spacing-col-sm;
	         right: $uni-spacing-row-sm;
	         z-index: 999;
	     }
	     &__txt{
	         text-align: center;
	         font-size: $uni-font-size-sm;
	         color: $uni-text-color-grey;
	     }
	     .card__center{
	         @include flex(center, center);
	     }
	 }
	 .card__foot{
	     position: relative;	     
		 &::before{
	         @include hr(top, $uni-spacing-row-base);
	     }
	 }
	 .checked{
	     @include flex(null, center);
	     padding: 0 $uni-spacing-row-base;
	     &__field{
	         @include flex(null, center);
	         height: 88rpx;
	     }
	 }
	 .link{
	     color: $color-sub;
	 }
	.main-all{
		margin: 0;
		padding: 0;
		width: 100%;
		.main-head{
			padding: 10upx 0;
			color: #5d5d5d;
			background-color: #ffffff;
		}
	}
</style>
